<template>
	<view>
		<view class="toubugud" :style="{background: albei}">
			<image class="kefu" src="../../static/kefuh.png" @click="gokefu"></image>
			<view class="xxzx">
				<view @click="gogonggxx">
					<view class="tishi"></view>
					<image class="uimg" src="../../static/tzh.png"></image>
				</view>
				<image class="uimg" src="../../static/haomh.png" @click="goshaoma"></image>
			</view>
		</view>
		<view class="toubuxx">
			<view class="gerxxlan">
				<view class="grxinx" @click="gogrzhl">
					<image class="gertoux" :src="user.touxiang||user.sex==1?'../../static/touxn.png':user.sex==2?'../../static/touxnv.png':'../../static/touxw.png'" mode="aspectFill"></image>
					<view class="xmwak">
						<view class="xinming">
							<view class="name">{{user.nickname}}</view>
							<view class="huiydj">普通会员</view>
						</view>
						<view class="lxfangs">{{user.phone}}</view>
					</view>
				</view>
				<view class="fenxiang" @click="yuehexiao">
					<image class="erwem" src="../../static/2weim.png"></image>
				</view>
			</view>
			<view class="kapian">
				<view class="zuobian">
					<view class="yuershu">
						<view class="ongke">余额</view>
						<view>￥{{user.yuer}}</view>
					</view>
					<view class="tiswenz">请及时充值保持您的角色特权</view>
				</view>
				<view class="congzhi" @click="gochongzi">充值</view>
			</view>
		</view>
		<view class="gongneng">
			<view class="neirdis">
				<view class="shangc">
					<view class="myfenx">我的分销</view>
					<view @click="goshoyi">有可提现收益></view>
				</view>
				<view class="qudaos">
					<view>邀请会员成为渠道商</view>
					<view class="yaoqing" @click="yaoqingma">立即邀请</view>
				</view>
			</view>
		<!-- 	<view class="neirdis">
				<view class="shangc">
					<view class="myfenx">订单</view>
					<view @click="godingdan">查看全部></view>
				</view>
				<view class="zuangtl">
					<view class="zttub" @click="godingdan">
						<image class="daishouh" src="../../static/daishouh.png"></image>
						<view>待付款</view>
					</view>
					<view class="zttub" @click="godingdan">
						<image class="daishouh" src="../../static/yifuk.png"></image>
						<view>已付款</view>
					</view>
					<view class="zttub" @click="godingdan">
						<image class="daishouh" src="../../static/daishuo.png"></image>
						<view>待收款</view>
					</view>
					<view class="zttub" @click="godingdan">
						<image class="daishouh" src="../../static/pingjia.png"></image>
						<view>未评价</view>
					</view>
				</view>
			</view> -->
			<view class="neirdis">
				<view class="shangc" @click="gomyzhangd">
					<view class="caidan">
						<image class="xfjil" src="../../static/xfjilu.png"></image>
						<view class="myfenx">我的账单</view>
					</view>
					<view class="jinrsm">
						<view>查看账单明细</view>
						<image class="go" src="../../static/go.png"></image>
					</view>
				</view>
			</view>
			<view class="neirdis">
				<view class="shangc" @click="gonianka">
					<view class="caidan">
						<image class="xfjil" src="../../static/nknian.png"></image>
						<view class="myfenx">我的年卡</view>
					</view>
					<view class="jinrsm">
						<view>充值年卡</view>
						<image class="go" src="../../static/go.png"></image>
					</view>
				</view>
			</view>
			<view class="neirdis">
				<view class="shangc" @click="gowdpaidui">
					<view class="caidan">
						<image class="xfjil" src="../../static/wdpaid.png"></image>
						<view class="myfenx">我的排队</view>
					</view>
					<view class="jinrsm">
						<view>查看排队记录和状态</view>
						<image class="go" src="../../static/go.png"></image>
					</view>
				</view>
			</view>
			<view class="neirdis" @click="tuichudl">
				<view class="shangc">
					<view class="caidan">
						<image class="xfjil" src="../../static/tuichu.png"></image>
						<view class="myfenx">退出</view>
					</view>
					<view class="jinrsm">
						<view>退出当前用户</view>
						<image class="go" src="../../static/go.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mengban" v-if="menbtc" @click="yaoqingma">
			<view class="yaoqinqur">
				<!-- <image class="erwem" src="../../static/rewei.jpg" mode=""></image> -->
				<view style="display: flex;justify-content: center;">
					<uqrcode ref="uQRCode" :text="uQRCodeText" :size="150" />
				</view>
				<view class="yaoqim">
					<view>邀请码</view>
					<view class="yaoqchuan">{{userInfo.mytuij}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:null,
				menbtc:false,
				albei:'',
				userInfo: {},
				uQRCodeText: ""
			}
		},
		// 监控屏幕滚动
		onPageScroll(e) {
			// console.log(e.scrollTop);
			var zuob = 1;
			if(e.scrollTop>=100){
				zuob = 100;
			}else{
				zuob = e.scrollTop;
			}
			this.albei = 'rgba(255,255,255, ' + (zuob*0.01) + ')';
		},
		onLoad() {
			
		},
		onShow() {
			this.userInfo = uni.getStorageSync('user_key');
			setTimeout(() => {
				this.generateQRcode();
			}, 500)
			var that = this
			uni.getStorage({
				key: 'user_key',
				success: function (res) {
					// console.log(666,res)
					that.user = res.data;
				}
			})
		},
		methods: {
			generateQRcode() {
				this.uQRCodeText = this.userInfo.mytuij;
				this.$refs.uQRCode.reload();
			},
			goshoyi(){
				uni.switchTab({
					url:'../yaoqingm/yaoqingm'
				})
			},
			// 弹出邀请
			yaoqingma(){
				this.menbtc = !this.menbtc
			},
			// 拔打电话
			gokefu(){
				uni.makePhoneCall({
					phoneNumber:'15978194868'
				})
			},
			// 消息
			gogonggxx(){
				uni.navigateTo({
					url:'../xiaoxtongz/xiaoxtongz'
				})
			},
			// 扫码
			goshaoma() {
				 let that = this;
				 // 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						 that.result2 = res.result;
						 console.log('条码类型：' + res.scanType);
						 console.log('条码内容：' + res.result);
					}
				});
			},
			// 个人资料
			gogrzhl(){
				uni.navigateTo({
					url:'../gerenzl/gerenzl'
				})
			},
			// 核销码
			yuehexiao(){
				uni.switchTab({
					url:'../yuehexiao/yuehexiao'
				})
			},
			// 订单
			godingdan(){
				uni.reLaunch({
					url:'../dingdan/dingdan'
				})
			},
			// 年卡
			gonianka(){
				uni.navigateTo({
					url:'../nianka/nianka'
				})
			},
			gowdpaidui() {
				uni.switchTab({
					url:'../wdpaidui/wdpaidui'
				})
			},
			// 充值
			gochongzi(){
				uni.navigateTo({
					url:'../yuercz/yuercz'
				})
			},
			// 账单
			gomyzhangd(){
				uni.navigateTo({
					url:'../myzhangdan/myzhangdan'
				})
			},
			// 退出登录
			tuichudl(){
				wx.showModal({
					title: '提示',
					content: '确认要退出吗？',
					success: function (es) {
						if (es.confirm) {  
							uni.removeStorage({
								key:'user_key',
								success:function() {
									uni.reLaunch({
										url:'../lodng/lodng'
									})
								}
							})
						} else {   
						  console.log('点击取消回调')
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mengban{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		background: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		.yaoqinqur{
			width: 420rpx;
			background: #ffffff;
			padding: 40rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.erwem{
				width: 350rpx;
				height: 350rpx;
			}
			.yaoqim{
				width: 350rpx;
				margin-top: 30rpx;
				font-size: 26rpx;
				color: #808388;
				.yaoqchuan{
					font-size: 40rpx;
					font-weight: bold;
					color: #ff007f;
					margin-top: 10rpx;
				}
			}
		}
	}
	.toubugud{
		position: fixed;
		width: 750rpx;
		padding: 30rpx 0 10rpx 0 ;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.kefu{
			width: 60rpx;
			height: 60rpx;
			margin-left: 50rpx;
		}
		.xxzx{
			width: 150rpx;
			height: 80rpx;
			margin-right: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.tishi{
				width: 20rpx;
				height: 20rpx;
				background-color: #ff0000;
				border-radius: 10rpx;
				position: absolute;
				z-index: 11;
				margin-left: 35rpx;
			}
			.uimg{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.toubuxx{
		width: 750rpx;
		height: 500rpx;
		.kapian{
			display: flex;
			justify-content: space-between;
			margin: 30rpx 50rpx;
			width: 650rpx;
			height: 200rpx;
			background: linear-gradient(30deg,#444230,#0d0c0c);
			border-radius: 20rpx 20rpx 0 0;
			.zuobian{
				padding: 30rpx 0 0 30rpx;
				.yuershu{
					display: flex;
					align-items: center;
					color: #ffffff;
					font-weight: bold;
					font-size: 28rpx;
					.ongke{
						margin-right: 20rpx;
					}
				}
				.tiswenz{
					font-size: 25rpx;
					color: #808080;
					margin-top: 10rpx;
				}
			}
			.congzhi{
				background: #bcae7a;
				width: 150rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #553030;
				margin-top: 40rpx;
				font-size: 28rpx;
				border-radius: 35rpx 0 0 35rpx;
			}
		}
		.gerxxlan{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 150rpx 0 0 50rpx;
			.grxinx{
				display: flex;
				// align-items: center;
				.gertoux{
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
				}
				.xmwak{
					margin-left: 10rpx;
					margin-top: 10rpx;
					.xinming{
						display: flex;
						align-items: center;
						.name{
							font-size: 35rpx;
							font-weight: bold;
						}
						.huiydj{
							font-size: 25rpx;
							color: #5e5e5e;
							background: #e2bc79;
							padding: 5rpx 20rpx;
							margin-left: 10rpx;
							border-radius: 20rpx;
						}
					}
					.lxfangs{
						position: absolute;
						font-size: 25rpx;
						margin-top: 10rpx;
						padding: 5rpx 20rpx;
						border-radius: 20rpx;
						color: #666666;
						background: #d8d0bb;
					}
				}
				
			}
			.fenxiang{
				width: 70rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				background: #d8d0bb;
				margin-right: 50rpx;
				.erwem{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
	.toubuxx::after{
		content: "";
		background-image: url('../../static/beijing.jpg');
		opacity: 0.6;
		background-size:100%;
		background-repeat:no-repeat; 
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: absolute;
		z-index: -1;
		width: 750rpx;
		height: 500rpx;
	}
	.gongneng{
		width: 750rpx;
		// height: 500rpx;
		margin-top: -70rpx;
		z-index: 1;
		overflow: hidden;
		position: relative;
		padding: 50rpx 0;
		.neirdis{
			margin-left: 30rpx;
			width: 630rpx;
			padding: 30rpx;
			background: #f3f3f3;
			margin-top: 20rpx;
			border-radius: 20rpx;
			.shangc{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #808080;
				.caidan{
					display: flex;
					align-items: center;
					.xfjil{
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
					.myfenx{
						color: #333333;
						font-weight: bold;
					}
				}
				.jinrsm{
					display: flex;
					align-items: center;
					.go{
						width: 35rpx;
						height: 35rpx;
					}
				}
				
			}
			.zuangtl{
				display: flex;
				justify-content: space-around;
				align-items: center;
				.zttub{
					width: 150rpx;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #666666;
					font-size: 26rpx;
					.daishouh{
						width: 70rpx;
						height: 70rpx;
						margin-bottom: 10rpx;
					}
				}
			}
			.qudaos{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #eed2b5;
				font-size: 28rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-top: 20rpx;
				color: #645440;
				.yaoqing{
					padding: 10rpx 20rpx;
					background: linear-gradient(30deg,#4a4a4a,#2a2727);
					color: #c5c5c5;
					font-size: 28rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.gongneng::after{
		content: '';
		width: 160%;  
		height: 250rpx;  
		position: absolute;  
		left: -50%;  
		top: 0;  
		z-index: -1;  
		border-radius: 50% 50% 0 0 ;  
		background: #ffffff;
		// box-shadow: 10rpx 0rpx 20rpx 5rpx #000000;
	}
</style>
